import ReactDOM from "./react/react-dom";
import {useEffect, useState} from './react'

function FunctionComponent(props) {
  // console.log('?')
  const [state2, dispatch2] =  useState(1)
  useEffect(()=>{
    console.log('state2变化')
  }, [state2])
  return (
    <div className="border">
      <button
        onClick={() => {
          console.log("omg"); //sy-log
          dispatch2(state2+1)
        }}>
        click
      </button>
      <ul>
        <li key="0">0</li>
        {state2 % 2 ? <li key="1">1</li> : null}
        <li key="2">2</li>
        <li key="3">3</li>
      </ul>
    </div>
  );
}


const jsx = (
  <div className="border">
    <FunctionComponent name="FunctionComponent" />
  </div>
);

console.log(jsx)
{/* <FunctionComponent name="FunctionComponent" />
<>
  <h1>omg</h1>
  <h2>omg</h2>
</> */}

ReactDOM.render(jsx, document.getElementById("root"));